<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <%--        <base href="/mall_ssm/">--%>
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/js/jquery-1.11.1.js"></script>
    <script src="static/bootstrap/js/bootstrap.min.js"></script>
    <style>
        #tb1 th, #tb1 td {
            text-align: center;
            vertical-align: middle!important;
        }
        .cc1{
            float: right;
            border-bottom-color: red;
        }
    </style>
</head>

<body>

<div class="container">
    <input type="button" value="新增" onclick="showUpdateDiv('')"/><%--新增商品这里，传了个空串，因为修改也需要用到这个方法，用来区分--%>
    <input type="button" value="批量删除" onclick="deleteBatch()"/>
    <button  class="cc1" type="button"  onclick="tologin()">退出登录</button>
    <table id="tb1" class="table table-striped table-hover">
        <thead>
        <th>商品id</th>
        <th>商品名称</th>
        <th>商品类别</th>
        <th>单价</th>
        <th>库存</th>
        <th>图片</th>
        <th>简介</th>
        <th>操作</th>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</div>

<%-- ------------------------模态框------------------------------ --%>
<div class="container">
    <div id="a1" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="goodsDetail">

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
</body>
<script>
function tologin(){
   if(confirm('你确定要退出该账户吗')){
       window.location.href="/mall/static/html/easthome/vertical-menu-template/auth-login.html";
   }
}
    //执行保存操作
    function save(type){//type用来判断是 新增还是修改操作,新增的"保存"按钮，里面传的参是addGoods；修改的"保存"按钮，传的是updateGoods
        //formData这个对象，里面装了两个key-value对，一个是商品相关的内容，一个是文件相关的内容。
		var formData = new FormData();
            formData.append("uploadFile",$("#file")[0].files[0]);//我们点击完上传文件，选择好文件以后，相关的数据就存在files中了。
            var goods = JSON.stringify({
                goodsId:$("#goodsId").val(),
                goodsName:$("#goodsName").val(),
                gtId:$("#gtId").val(),
                unitPrice:$("#unitPrice").val(),
                stock:$("#stock").val(),
                imgUrl:$("#img").attr("value"),
                introduce:$("#introduce").val()
            })
            console.log("goods",goods)
            formData.append("goods",new Blob([goods], {type: "application/json"}));//这里拼的是 模态框中的其他数据
    
		//去后台，把这些数据传过去。
        $.ajax({
            url:'${pageContext.request.contextPath}/goodsManagement/'+type,

            data:formData,
            method:'post',//上传文件需要
            contentType:false,//上传文件需要
            processData:false,//上传文件需要
            dataType:'json',
            success:function (resp){
                console.log("save.."+resp.data)
                closeDiv();
                init();
            },
            error:function (){
                console.log("挂了")
            }
        })


	}

    //关闭模态框
    function closeDiv(){
        $('#a1').modal('hide');
    }

    //弹出 模态框，并在模态框中显示数据
    //我们点击 "修改"、"新增"都会调用这个方法。
    //这里就需要我们进行判断，
    function showUpdateDiv(goodsId){

        //判断是 新增操作，还是修改操作
        if(goodsId==''){//新增需要做的操作
            //动态的生成html代码。
            dealWithModalAddStr();
            $('#a1').modal();//显示模态框
            return;//别忘了return，因为新增不用去后台
        }

        //去后台通过id查询商品详情，然后动态显示在模态框中。
        $.ajax({
            url:'${pageContext.request.contextPath}/goodsManagement/goods/'+goodsId,
            success:function (resp){
                console.log(resp);
                //动态生成模态框的html代码
                dealWithModalStr(resp.data);
            },
            error:function (){
                console.log("挂了")
            }
        })

        $('#a1').modal();
    }

    //动态生成 “新增“的模态框数据
    function dealWithModalAddStr(){
        //这里存html代码
        var str = `
        <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">商品详情</h4>
                </div>
                <div class="modal-body">
                    <form id="detailForm">
                        <table id="details" class="table table-striped table-hover">
                            <tr>
                                <td>商品id</td>
                                <td>
                                    待生成
                                </td>
                            </tr>
                            <tr>
                                <td>商品名称</td>
                                <td><input type="text" name="goodsName" id="goodsName" value=""></td>
                            </tr>
                            <tr class="success">
                                <td>商品类别</td>
                                <td>
                                    <select id=gtId>`;
                                    $.each(JSON.parse('${gtList}'),function (index,item){
                                        str += '<option value="'+item.typeId+'">'+item.typeName+'</option>';
                                    })
                                    str +=`</select>
                                </td>
                            </tr>
                            <tr class="info">
                                <td>单价</td>
                                <td><input type="text" name="unitPrice" id="unitPrice" value=""></td>
                            </tr>
                            <tr>
                                <td>库存</td>
                                <td><input type="text" name="stock" id="stock" value=""></td>
                            </tr>
                            <tr>
                                <td>图片</td>
                                <td>
                                    <div>
                                        <!--分析，由于是新增，这里默认给一个图片，想展示 ，需要加上static/,那记得后台要处理一下 -->
                                        <img id="img" value="images/pages/eCommerce/2.png" onclick="javascript:$('#file').trigger('click')"
                                             src="static/images/pages/eCommerce/2.png" style="width:100px">
                                        <input type="file" id="file" name="uploadFile" style="display:none">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>简介</td>
                                <td><textarea name="introduce" id="introduce" rows="10" cols="50"></textarea></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="closeDiv()" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="save('addGoods')">保存</button>
                </div>
        `;
        $("#goodsDetail").html(str);//将html代码装进模态框中。
    }

    //动态生成模态框中的数据
    function dealWithModalStr(data){
        //console.log("------",'${gtList}')
        var str = `
        <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">商品详情</h4>
                </div>
                <div class="modal-body">
                    <form id="detailForm">
                        <table id="details" class="table table-striped table-hover">
                            <tr>
                                <td>商品id</td>
                                <td>
                                    `+data.goodsId+`
                                    <input type="hidden" id="goodsId" name="goodsId" value="`+data.goodsId+`"/>
                                </td>
                            </tr>
                            <tr>
                                <td>商品名称</td>
                                <td><input type="text" name="goodsName" id="goodsName" value="`+data.goodsName+`"></td>
                            </tr>
                            <tr class="success">
                                <td>商品类别</td>
                                <td>
                                    <select id=gtId>`;

                                    $.each(JSON.parse('${gtList}'),function (index,item){
                                        str += '<option '+(item.typeId==data.gtId?"selected":"")+' value="'+item.typeId+'">'+item.typeName+'</option>';
                                    })

                                    str +=`</select>
                                </td>
                            </tr>
                            <tr class="info">
                                <td>单价</td>
                                <td><input type="text" name="unitPrice" id="unitPrice" value="`+data.unitPrice+`"></td>
                            </tr>
                            <tr>
                                <td>库存</td>
                                <td><input type="text" name="stock" id="stock" value="`+data.stock+`"></td>
                            </tr>
                            <tr>
                                <td>图片</td>
                                <td>
                                    <div>
                                        <img id="img" value="`+data.imgUrl+`" onclick="javascript:$('#file').trigger('click')"
                                             src="static/`+data.imgUrl+`" style="width:100px">
                                        <input type="file" id="file" name="uploadFile" style="display:none">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>简介</td>
                                <td><textarea name="introduce" id="introduce" rows="10" cols="50">`+data.introduce+`</textarea></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="closeDiv()" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="save('updateGoods')">保存</button>
                </div>
        `;
        $("#goodsDetail").html(str);
    }


    //异步查询商品列表
    function init(){
        $.ajax({
            url:'${pageContext.request.contextPath}/goodsManagement/goodsList',
            success:function(resp){
                console.log("-----",resp);
                //我们在这里动态的生成上面的代码，我们的str中装 循环出来的n个<tr>
                var str = "";
                //$.each(对谁循环,function(index,intem){....});
                $.each(resp.data,function(index,item){
                    str += `
                    <tr>
                        <td>`+item.goodsId+`</td>
                        <td>`+item.goodsName+`</td>
                        <td>`+item.typeName+`</td>
                        <td>`+item.unitPrice+`</td>
                        <td>`+item.stock+`</td>
                        <td><img id="imgUrl" src="static/`+item.imgUrl+`" style="width:100px"></td>
                        <td>`+(item.introduce.length<10?item.introduce:item.introduce.substring(0,10)+"...")+`</td>
                        <td>
                            <a href="javascript:;" onclick="showUpdateDiv(`+item.goodsId+`)">修改</a>

                            <a href="javascript:;" onclick="confirmDelete(`+item.goodsId+`)">删除</a>
                            <input type="checkbox" name="goodsIds" value="`+item.goodsId+`">
                        </td>
                    </tr>`;
                })

                $("#tbody").html(str);

            },
            error(){
                console.log("挂了")
            }
        })
    }

    //批量删除
    function deleteBatch(){
        if(confirm("确定要进行批量删除吗？")){
            var arr = [];//准备一个空数组，用来存ids
            //获取ids
            $.each($("input[name=goodsIds]"),function(index,item){
                 if(item.checked){//某个checckbox被选中
                     // console.log($(item).val())
                     arr.push($(item).val());
                 }
            })
            //去后台删除
            $.ajax({
                url:'${pageContext.request.contextPath}/goodsManagement/deleteBatch',
                method:'post',
                contentType:'application/json',
                data:JSON.stringify(arr),
                success:function (resp){
                    console.log("deleteBatch...",resp)
                    init();
                },
                error:function (){
                    console.log("挂了")
                }
            })
        }
    }

    //删除商品
    function confirmDelete(goodsId){
        if(confirm("确定要删除id为"+goodsId+"的商品吗")){
            $.ajax({
                url:'${pageContext.request.contextPath}/goodsManagement/deleteGoods/'+goodsId,
                method:'delete',
                success:function (resp){
                    console.log(resp);
                    init();
                },
                error:function (){
                    console.log("挂了")
                }
            })
        }
    }

    $(function (){
        init();

        //待上传图片的回显
        $("body").on('change',"#file",function (){
            var file = $("#file")[0].files[0];
            $("#img").attr("src",URL.createObjectURL(file));
            $("#img").attr('value',file.name)
        })
    })
</script>
</html>